<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Responsive Layout Demo</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

      /* 基础样式 */
      body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
      }

      /* 导航样式 */
      header {
        position: fixed;
        top: 0;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100%;

      }
      .menu {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 2rem;
      }

      nav ul a {
        text-decoration: none;
        color: #2c3e50;
        font-weight: 500;
      }

      nav ul a:hover {
        color: #42b983;
      }

      .toggle {
        display: none;
        z-index: 999;
        border: none;
        background: transparent;
        padding: 0.5rem;
        cursor: pointer;
      }

      .toggle svg {
        width: 24px;
        height: 24px;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .menu {
          position: relative;
        }

        .toggle {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .menu ul {
          display: none;
          flex-direction: column;
          width: 100%;
          position: absolute;
          top: 100%;
          left: 0;
          background-color: #ffffff;
          padding: 1rem;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .menu ul.menu-open {
          display: flex;
        }

        .menu li {
          margin: 0.5rem 0;
        }
      }

      /* 主体内容样式 */
      .page-content {
        margin-top: 4rem;
        padding: 2rem 0;
      }

      .page-content h1 {
        margin-top: 0;
      }

      .col-md-6 {
        background: bisque;
        height: 30rem;
      }

      /* 页脚样式 */
      footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f8f9fa;
        text-align: center;
        padding: 1rem;
        margin-top: 2rem;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 导航部分 -->
      <header class="container">
        <nav class="menu" :class="{ open: isMenuOpen }">
          <div class="logo">Logo</div>
          <button class="toggle" @click="toggleMenu" aria-label="Toggle menu">
            <svg v-if="!isMenuOpen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon">
              <line x1="3" y1="12" x2="21" y2="12"/>
              <line x1="3" y1="6" x2="21" y2="6"/>
              <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="close-icon">
              <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
              <path d="M9 9l6 6" />
              <path d="M15 9l-6 6" />
            </svg>
          </button>
          <ul :class="{ 'menu-open': isMenuOpen }">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>

      <!-- 主体内容 -->
      <main class="page-content">
        <div class="container">
          <h1>Welcome to Our Website</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu metus sed sapien auctor dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="row">
            <div class="col-md-6" id="home">
              <h2>home</h2>
              <p>It'is home.</p>
            </div>
            <div class="col-md-6" id="about">
              <h2>about</h2>
              <p>It'is about.</p>
            </div>
            <div class="col-md-6" id="services">
              <h2>services</h2>
              <p>It'is services.</p>
            </div>
            <div class="col-md-6" id="contact">
              <h2>contact</h2>
              <p>It'is contact.</p>
            </div>
            <div class="col-md-6">
              <h2>Service 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu metus sed sapien auctor dapibus.</p>
            </div>
            <div class="col-md-6">
              <h2>Service 2</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu metus sed sapien auctor dapibus.</p>
            </div>
          </div>
        </div>
      </main>

      <!-- 页脚 -->
      <footer>
        <div class="container">
          &copy; 2024 Company Name. All rights reserved.
        </div>
      </footer>
    </div>

    <script src="https://unpkg.com/vue@3"></script>
    <script>
      const { createApp, ref, onMounted } = Vue;

      createApp({
        setup() {
          const isMenuOpen = ref(false);

          const toggleMenu = () => {
            isMenuOpen.value = !isMenuOpen.value;
          };

          // 监听窗口大小变化
          onMounted(() => {
            const handleResize = () => {
              if (window.innerWidth > 768) {
                isMenuOpen.value = false;
              }
            };
            window.addEventListener('resize', handleResize);
            return () => window.removeEventListener('resize', handleResize);
          });

          return {
            isMenuOpen,
            toggleMenu,
          };
        },
      }).mount('#app');
    </script>
  </body>
</html>